<template>
    <div>
       <div class="warpper-boxs" style="margin-bottom:15px">
        <detail-list :col="4">
          <detail-list-item term="企业名称">{{detail.enterpriseName}}</detail-list-item>
          <detail-list-item term="关联园区名称" v-if="userInfo.type === 1">{{detail.parkName}}</detail-list-item>
        </detail-list>
        <detail-list :col="4">
          <detail-list-item term="当月开票次数">{{detail.monthCount}}</detail-list-item>
          <detail-list-item term="当月开票总金额">{{detail.monthAmount}}</detail-list-item>
          <detail-list-item term="历史开票次数">{{detail.totalCount}}</detail-list-item>
          <detail-list-item term="历史开票总金额">{{detail.totalAmount}}</detail-list-item>
        </detail-list>
       </div>
      
      <div class="warpper-box">
        <form-create 
          class="custom-select"
          v-model="params.fApi" 
          :rule="params.rule" 
          :option="params.option" 
          @btn-back-click="$router.back()"
          @btn-search-click="loadTable(true)"
          @btn-reset-click="reset"/>
        <a-card
          style="margin-top: 24px"
          :bordered="false"
          :tabList="tabData"
          :activeTabKey="activeTabKey"
          @tabChange="callbackTab">
          <a-table 
          :columns="table.columns" 
          :pagination="table.pagination" 
          @change="handleTableChange"
          rowKey="id"
          :data-source="table.loadData">
            <span slot="action" slot-scope="text, record">
              <span v-if="activeTabKey === '2'">
                <a v-action:billingVerifyBtn @click="$refs.createApplyForm.add(record)">审核</a>
                <a-divider v-action:billingVerifyBtn type="vertical" />
              </span>
              <span v-if="activeTabKey === '3'">
                <a v-action:billingAddInvoiceBtn @click="$refs.createInvoiceForm.add(record)">上传发票</a>
                <a-divider v-action:billingAddInvoiceBtn type="vertical" />
              </span>
              <span v-if="activeTabKey === '1' && userInfo.type === 3">
                <a v-action:billingInvoiceFileBtn @click="updateFile(record,true)">发票管理</a>
                <a-divider v-action:billingInvoiceFileBtn type="vertical" />
              </span>
              <a @click="details(record)">查看详情</a>
            </span>
          </a-table>
        </a-card>
    </div>

    <invoice-add ref="createInvoiceForm" @ok="loadTable(true)"/>
    <invoice-apply ref="createApplyForm" @ok="loadTable(true)"/>
    <invoice-detail ref="createDetail"/>
    <invoice-file ref="createInvoiceFile" @ok="updateFile"/>
  </div>
</template>

<script>
import { mapGetters,mapActions} from 'vuex'
import DetailList from '@/components/tools/DetailList'
const DetailListItem = DetailList.Item
import {
    PARAMS_BILLING_DETAIL,
    COLUMNS_NO_BILLING,
    COLUMNS_OTHER_BILLING,
    EN_BILLING_TAB,
    PARK_BILLING_TAB,
    OPTION_BLOCK,
    OPTION_INLINE
} from './form'
import InvoiceApply from './invoice_apply'
import InvoiceAdd from './invoice_add'
import InvoiceDetail from './invoice_detail'
import InvoiceFile from './invoice_file'
import { 
  allGetBillingParkList,
  allGetBillingEnterpriseList,
  allGetBillingStateList,
  allGetBillingStatis,
  billingAdd,
  billingCancel,
  billingDetail,
  billingOperate,
  billingUpload
} from '@/api/manage/billing'
export default {
  name: 'billingDetail',
  components: {
    DetailList,
    DetailListItem,
    InvoiceApply,
    InvoiceAdd,
    InvoiceDetail,
    InvoiceFile
  },
  data () {
    return {
      activeTabKey:'2',
      params:{
        fApi:{},
        rule:PARAMS_BILLING_DETAIL,
        option:OPTION_INLINE
      },
      table:{
        columns:[],
        loadData:[],
        pagination:{
          current:1,
          pageSize: 10,
          total:0,
          showSizeChanger: true,
					showQuickJumper: true,
          pageSizeOptions: ["10", "20", "50", "100"],
          showTotal: total => `共有 ${total} 条数据`,
        }
      },
      detail:{
        monthCount:0,
        monthAmount:0,
        totalCount:0,
        totalAmount:0,
        enterpriseName:'',
        parkName:''
      },
      tabData:PARK_BILLING_TAB
    }
  },
  computed: {
    ...mapGetters(['userInfo'])
  },
  created () {
    let nowDate = new Date();
    const time =  nowDate.getFullYear() + "-0" + (nowDate.getMonth()+1);
    this.$nextTick(()=>{
      this.params.fApi.setValue({'time':time})
    })
    this.generateRoutes();
    this.initColumns();
    this.initStatis();
  },
  methods: {
    ...mapActions({
      generateRoutes:'generateRoutes'
    }),
    initColumns(){
      let billingKey = this.userInfo.roleFiledAuthorities.billingKey;
      if(billingKey && billingKey.length >= 1){
        this.table.columns = COLUMNS_OTHER_BILLING.filter(v=> !billingKey.includes(v.dataIndex));
      }else{
         this.table.columns = COLUMNS_OTHER_BILLING;
      }
       this.loadTable(true);
    },
    async initStatis(){
      let params = {};
      if(this.userInfo.type === 1){
          params.parkId = this.$route.query.parkId;
          params.enterpriseId = this.$route.query.enterpriseId;
      }else if(this.userInfo.type === 3){
          params.enterpriseId = this.$route.query.enterpriseId;
      }
      params.pageNum = this.table.pagination.current;
      params.pageSize = this.table.pagination.pageSize;
      const {code,data} = await allGetBillingStatis(params);
      if(code === '1'){
        if(data && data != null){
          for(var key in data){
            this.detail[key] = data[key];
          }
        }
      }
    },
    async loadTable(flag){
       let params = {};
      
      if(JSON.stringify(this.params.fApi) !== "{}"){
        const formData = this.params.fApi.formData();
        if(formData.time){
          params.time = formData.time;
        }
        params.batchCode = formData.batchCode;
        params.batchName = formData.batchName;
      }

      if(JSON.stringify(this.params.fApi) === "{}"){
          let nowDate = new Date();
          params.time =  nowDate.getFullYear() + "-0" + (nowDate.getMonth()+1);
      }

      if(flag){
        this.table.pagination.current = 1;
        this.table.pagination.pageSize = 10;
      }
      params.enterpriseId = this.$route.query.enterpriseId;
      if(this.userInfo.type === 1){
         params.parkId = this.$route.query.parkId;
      }
      params.status = parseInt(this.activeTabKey);
      params.pageNum = this.table.pagination.current;
      params.pageSize = this.table.pagination.pageSize;
      const {code,data} = await allGetBillingStateList(params);
      if(code ==='1'){
        this.table.loadData = data.content;
        this.table.pagination.total = data.total || 0;
      }
    },
    handleTableChange(pagination){
      this.table.pagination.current = pagination.current;
      this.table.pagination.pageSize = pagination.pageSize;
      this.loadTable(false);
    },
    callbackTab(key){
      this.activeTabKey = key;
      this.loadTable(false);
    },
    details(rows){
      this.$refs.createDetail.invoiceDetail(rows)
    },
    reset(){
      this.params.fApi.setValue({
        "time":"",
        "batchCode":"",
        "batchName":""
      })
      this.loadTable(true);
    },
    updateFile(rows,flag){
      this.$refs.createInvoiceFile.add(rows,flag)
    }
  }
}
</script>
